<template>
  <div class="clean-service">
    <div class="clean-service__select">
      <div class="clean-service__select-date">
        <el-date-picker
          v-model="dayTime"
          type="month"
          :clearable="false"
          size="mini"
          value-format="yyyy-MM"
          format="yyyy年M月"
          @change="getData">
        </el-date-picker>
      </div>
      <el-checkbox v-model="checked" @change="getData">昨日</el-checkbox>
    </div>
    <div class="clean-service__table">
      <div class="item title" v-if="checked">
        <span style="color: #4AD16C">{{yestoday}}</span>
        <span>总人数</span>
        <span>在岗人数</span>
        <span>巡更点位</span>
      </div>
      <div class="item title" v-else>
        <span style="color: #4AD16C">{{dayTime.replace('-','年')+'月'}}</span>
        <span>平均总人数</span>
        <span>平均在岗人数</span>
        <span>平均巡更点位</span>
      </div>
      <div v-for="(item,i) in data" :key="i" class="item">
        <span>{{item.cityName}}</span>
        <span>{{item.bjNum}}</span>
        <span>{{item.bjzgNum}}</span>
        <span>{{item.zkdwzs}}</span>
      </div>
    </div>
    <div class="order-summary__content">
      <ve-histogram ref="chart" :data="chartData" :settings="chartSettings" :extend="chartExtend" width="95%" height="8.5rem" :colors="colors"></ve-histogram>
    </div>
  </div>
</template>
<script>
import { Select, Option, Checkbox, DatePicker } from 'element-ui'
import Histogram from 'v-charts/lib/histogram.common'
import { getBjba } from 'src/api/api'
import { formatDate, getDay, formatFontSize } from 'js/utils'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Checkbox.name]: Checkbox,
    [Histogram.name]: Histogram,
    [DatePicker.name]: DatePicker,
  },
  data(){
    this.colors = ['#0A8CFF', '#FF99A9']
    return {
      checked: false,
      dayTime: formatDate('yyyy-mm', new Date()),
      chartData: {
        columns: ['cityName', 'zkdks','bzBjNum'],
        rows: []
      },
      chartSettings: {
        showLine: ['bzBjNum'],
        labelMap: {
          'zkdks': '实际打卡数',
          'bzBjNum': '标准打卡数'
        },
      },
      chartExtend: {
        title: {
          text: '各城市月度巡更打卡图',
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          right: 0,
          top: '3%'
        },
        legend: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          selectedMode: false,
          left: '10%',
          top: '7%',
          itemWidth: formatFontSize(0.15),
          itemHeight: formatFontSize(0.08),
        },
        xAxis: {
          axisLabel: {
            color: '#fff'
          },
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          // max: 5000,
          splitNumber: 5,
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '30%',
          bottom: '0',  
        },
        series: {
          barWidth: formatFontSize(0.2),
          label: { 
            show: true, 
            position: 'top',
            color: '#fff',
            fontSize: formatFontSize(0.1),
            formatter: param => {
              let target = ''
              if(param.seriesType == 'bar') {
                target = param.data
              }else if(param.seriesType == 'line') {
                target = ''
              }
              return target
            }
          },
        }
      },
      data: [],
      yestoday: getDay('-1', '-').substr(6, 10).replace('-','月')+'日'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // this.$emit('getData', this.value)
      let params = {}
      if(this.checked) {
        params = {
         dayTime: getDay('-1', '-')
        }
      } else {
        params = {
          dayTime: this.dayTime
        }
      }
      getBjba(params).then(res=>{
        if(res.success === true) {
          this.data = res.data
          this.chartData.rows = res.data
        }
      })
    }
  }
}
</script>
<style lang="scss">
.clean-service {
  &__select {
    text-align: right;
    padding: 5px 40px 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #AAECFF;
    .el-select, .el-date-editor {
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-date {
      margin-right: 20px;
      .el-date-editor {
        width: 135px;
      }
    }
    .el-checkbox {
      color: #AAECFF;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #AAECFF;
    }
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  &__table {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    // height: 150px;
    // width: 100%;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      // width: 7%;
      // height: 150px;
      span {
        display: block;
        border: 0.5px solid #6A97AA;
        width: 38px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #6A97AA;
        text-align: center;
        // padding-top: 10px;
      }
    }
    .title {
      span {
        width: 85px;
        font-size: 10px;
      }
    }
  }
}
</style>